import React from 'react';
import { Menu, Layout } from 'antd';
import styles from './index.less';
import ModalC from './other/modalC';
import AdvanceSearchC from './advanceSearch';
import FormGroupC from './formGroup';
import ExportWord from '@/src/demo/ExportWord';
import DomToImage from '@/src/demo/DomToImage';
import ProductListC from './business/product/productListC';
import ProductGroupTreeC from './business/product/productGroupTreeC';
import ProductGroupSepC from './business/product/productGroupSepC';
import ProductGroupC from './business/product/productGroupC';
import SecuritiesCodeC from './business/securitiesCode';
import WinBondTypeC from './business/winBondType';
import TenantC from './business/tenant';
import ButtonC from './other/button';
import FirstHeaderC from './other/firstHeader';
import SecondHeaderC from './other/secondHeader';
import QuickQueryC from './other/quickQuery';
import XYAxisChartsC from './echarts/xyAxisCharts';
import XYHorizontalChartsC from './echarts/xyHorizontalChart';
import BigEventC from './echarts/bigEvent';
import LinkageChartsC from './echarts/linkageCharts';
import TreemapChartC from './echarts/treemapChart';
import ComplexDateC from './form/complexDateC';
import RangeDateC from './form/rangeDateC';
import SimpleQuarterC from './form/simpleQuarterC';
import SingleDateC from './form/SingleDateC';
import SelectC from './form/selectC';
import NestingC from './table/nesting';
import NestedTableDemo from './table/nestedTable';
import TableC from './table/table';
import FixedHeader from './table/fixedHeader';
import NoQueryC from './other/noQuery';
import NoDataC from './other/noData';
import NoDataGrayC from './other/noDataGray';
import BPMNDisplay from './bpmn/page/display';
import BPMNOperation from './bpmn/page/operation';
import BenchMark from './business/benchMark';
import ChildBenchMark from './business/childBenchMark';
import SeriesProduct from './business/seriesProduct';
import SeriesProductGroup from './business/seriesProduct/seriesProductGroupC';
import Address from './business/address';
import AvailableAsset from './business/availableAsset';
import TradHold from './business/tradeHold';
import TestTable from './test/test';
import TestTableDemo from './test/testDemo';
import AreaChartsCDemo from './echarts/areaEcharts';
import MapEcharts from './echarts/MapEcharts';
import TreeCharts from './echarts/tree';
import TradingMarket from './business/tradingMarket';
import TradingDirect from './business/tradingDirect';
import TradingType from './business/tradingType';
import TradingCompany from './business/tradingCompany';
import MilepostC from './other/milepostC';
import CandlestickC from './echarts/candlestickCharts';
// import BPMNOperation from './bpmn/ProcessManage/ProcessDesign';
import AllFormTypeDemo from './form/allFormType';
import CommonFuncDemo from './other/commonFunc';
import TreeSelectCDemo from './form/treeSelectC';
import SelfDefFormDemo from './test/selfDefForm';
import DemoLineChartsC from './echarts/DemoLineChartsC';
import PanelEchartsDemo from './echarts/panelEcahrts';
import RateRangeC from './business/rateRangeC';
import UploadCDemo from './other/upload';
import InfoTip from './other/InfoTips';
import FixedButton from './other/fixedButton';
import IconCDemo from './other/iconC';
import Export from './other/export';
import ExportFrontEnd from './other/exportFrontEnd';
import ExportTableBaseDate from './other/ExportExcelComps/exportTableBaseDate';
import CardCDemo from './other/cardC';
import PdfImport from './test/pdfImport';
import IndustryC from './business/industry';
import ExportPDF from './exportPDF';
import LineConnect from './other/lineConnect';
import FormGroupOneTwoC from './FormGroupOneTwoC';
import Websockets from './other/websocket';
import FundApplicationIndustry from './business/fundApplicationIndustry/fundApplicationIndustry';
import SppIResult from './business/sppiResult';
import BusinessTarget from './business/BusinessTarget';
import SearchAndSelect from './business/searchAndSelect';
import CollectCDemo from './other/collectC';
import TabsC from './other/tabsC';
import VideoDemo from './other/videoDemo';
import StepDemo from './other/stepC';
import moment from 'moment';
import GroupHeader from '@/src/demo/other/ExportExcelComps/GroupHeader';
import SettingCellStyle from '@/src/demo/other/ExportExcelComps/SettingCellStyle';
import SettingRowStyle from '@/src/demo/other/ExportExcelComps/SettingRowStyle';
import MoreSheet from '@/src/demo/other/ExportExcelComps/MoreSheet';
import SettingOverallStyle from '@/src/demo/other/ExportExcelComps/SettingOverallStyle';
import TableRowColMerge from '@/src/demo/other/ExportExcelComps/TableRowColMerge';

const { Header, Content } = Layout;
const { SubMenu } = Menu;
class Demo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectKey: '435',
      openKey: '4',
    };
  }

  menuList = [
    { key: '11', name: '产品列表', component: <ProductListC /> },
    { key: '12', name: '组合树', component: <ProductGroupTreeC /> },
    { key: '13', name: '产品组合联动组件', component: <ProductGroupSepC /> },
    { key: '14', name: '证券代码', component: <SecuritiesCodeC /> },
    { key: '24', name: '可输入可下拉组件', component: <SearchAndSelect /> },
    { key: '15', name: '基准', component: <BenchMark /> },
    { key: '25', name: '子基准', component: <ChildBenchMark /> },
    { key: '16', name: '系列产品', component: <SeriesProduct /> },
    { key: '17', name: '省市', component: <Address /> },
    { key: '18', name: '交易市场', component: <TradingMarket /> },
    { key: '19', name: '交易方向', component: <TradingDirect /> },
    { key: '20', name: '系列产品+名称', component: <SeriesProductGroup /> },
    { key: '30', name: '行业', component: <IndustryC /> },
    { key: '111', name: '交易类型', component: <TradingType /> },
    { key: '112', name: '交易对手', component: <TradingCompany /> },
    { key: '113', name: '资金可用', component: <AvailableAsset /> },
    { key: '114', name: '持仓可用', component: <TradHold /> },
    { key: '115', name: '产品组列表', component: <ProductGroupC /> },
    { key: '116', name: 'win债券类型', component: <WinBondTypeC /> },
    { key: '120', name: '租户', component: <TenantC /> },
    { key: '121', name: '评级区间', component: <RateRangeC /> },
    { key: '122', name: '资金运用行业', component: <FundApplicationIndustry /> },
    { key: '123', name: 'sppi目标结果', component: <SppIResult /> },
    { key: '124', name: '业务目标', component: <BusinessTarget /> },
    { key: '21', name: '查询组件', component: <AdvanceSearchC /> },
    { key: '211', name: 'form集合组件', component: <FormGroupC /> },
    { key: '212', name: '一排一个以及一排两个自适应', component: <FormGroupOneTwoC /> },

    { key: '31', name: '普通表格', component: <TableC /> },
    { key: '32', name: '嵌套表格', component: <NestingC /> },
    { key: '34', name: '嵌套表格New', component: <NestedTableDemo /> },
    // { key: '33', name: '固定表头', component: <FixedHeader /> },
    { key: '41', name: '模态框', component: <ModalC /> },
    { key: '42', name: '一级标题', component: <FirstHeaderC /> },
    { key: '43', name: '二、三级标题', component: <SecondHeaderC /> },
    { key: '44', name: '按钮组件', component: <ButtonC /> },
    { key: '45', name: '快速查询按钮', component: <QuickQueryC /> },
    { key: '46', name: '无查询', component: <NoQueryC /> },
    { key: '47', name: '无数据', component: <NoDataC /> },
    { key: '48', name: '无数据蒙层', component: <NoDataGrayC /> },
    { key: '49', name: '日期进度条', component: <MilepostC /> },
    { key: '410', name: '公共函数', component: <CommonFuncDemo /> },
    { key: '411', name: '自定义form', component: <SelfDefFormDemo /> },
    { key: '421', name: '前端自导出', component: <ExportFrontEnd /> },
    { key: '425', name: 'demo自写', component: <ExportTableBaseDate /> },
    { key: '426', name: '表头分组导出', component: <GroupHeader /> },
    { key: '427', name: '多sheet页', component: <MoreSheet /> },
    { key: '428', name: '设置单元格样式', component: <SettingCellStyle /> },
    { key: '429', name: '设置行样式', component: <SettingRowStyle /> },
    { key: '430', name: '设置整体样式', component: <SettingOverallStyle /> },
    { key: '431', name: '表格行列合并', component: <TableRowColMerge /> },
    { key: '412', name: '附件上传/文件导入', component: <UploadCDemo /> },
    { key: '413', name: '图标', component: <IconCDemo /> },
    { key: '414', name: '卡片', component: <CardCDemo /> },
    { key: '415', name: '消息提示', component: <InfoTip /> },
    { key: '416', name: '悬浮按钮', component: <FixedButton /> },
    { key: '417', name: '文件导出', component: <Export /> },
    { key: '418', name: '导出PDF', component: <ExportPDF /> },
    { key: 'exportWord', name: '导出Word', component: <ExportWord /> },
    { key: 'domToImage', name: 'Dom元素转图片', component: <DomToImage /> },
    { key: '419', name: '连接两个dom', component: <LineConnect /> },
    { key: '420', name: '连接websocket', component: <Websockets /> },
    { key: '422', name: '汇总条目', component: <CollectCDemo /> },
    { key: '423', name: 'tabs', component: <TabsC /> },
    { key: '424', name: '视频播放', component: <VideoDemo /> },
    { key: '435', name: 'step步骤', component: <StepDemo /> },
    { key: '51', name: '纵向echarts图', component: <XYAxisChartsC /> },
    { key: '52', name: '横向echarts图', component: <XYHorizontalChartsC /> },
    { key: '53', name: '大事记图', component: <BigEventC /> },
    { key: '54', name: '上下联动图', component: <LinkageChartsC /> },
    { key: '55', name: '矩形树图', component: <TreemapChartC /> },
    { key: '56', name: '树形结构图', component: <TreeCharts /> },
    { key: '57', name: 'K线图', component: <CandlestickC /> },
    { key: '58', name: '饼状图', component: <DemoLineChartsC /> },
    { key: '59', name: '仪表盘', component: <PanelEchartsDemo /> },
    { key: '61', name: '复杂时间范围', component: <ComplexDateC /> },
    { key: '62', name: '简单时间范围', component: <RangeDateC /> },
    { key: '63', name: '下拉选择', component: <SelectC /> },
    { key: '64', name: '单时间', component: <SingleDateC /> },
    { key: '65', name: '所有form类型', component: <AllFormTypeDemo /> },
    { key: '66', name: '树形下拉控件', component: <TreeSelectCDemo /> },
    { key: '67', name: '自定义时间组件（支持季度）', component: <SimpleQuarterC /> },
    { key: '71', name: '流程图展示', component: <BPMNDisplay /> },
    { key: '72', name: '流程图操作', component: <BPMNOperation /> },
    { key: '81', name: '表格大量数据优化加载', component: <TestTable /> },
    { key: '74', name: '我的echarts', component: <AreaChartsCDemo /> },
    { key: '75', name: '地图+旭日图', component: <MapEcharts /> },
    { key: '76', name: '嵌套表格大量数据加载', component: <TestTableDemo /> },
    { key: '80', name: '导出PDF', component: <PdfImport /> },
  ];

  changeMenu = (e) => {
    this.setState({
      selectKey: e.key,
    });
  };

  render() {
    // let a = moment('1616256000000').format('YYYY-MM-DD');
    const a = moment(new Date(1616256000000)).format('YYYY-MM-DD');
    return (
      <div className={styles.demo}>
        <Header className={styles.header}>组件Demo</Header>
        <Layout style={{ display: 'flex', flexDirection: 'row', background: 'white' }}>
          <div className={styles.menu} style={{ height: 'calc(100vh - 64px)' }}>
            <Menu onClick={this.changeMenu} style={{ width: 256 }} defaultSelectedKeys={[this.state.selectKey]} defaultOpenKeys={[this.state.openKey]} mode='inline'>
              <SubMenu key='1' title='业务组件'>
                <Menu.Item key='11'>产品组件</Menu.Item>
                <Menu.Item key='12'>组合组件</Menu.Item>
                <Menu.Item key='13'>产品组合联动组件</Menu.Item>
                <Menu.Item key='14'>证券代码</Menu.Item>
                <Menu.Item key='24'>可下拉可输入组件</Menu.Item>
                <Menu.Item key='15'>基准</Menu.Item>
                <Menu.Item key='25'>子基准</Menu.Item>
                <Menu.Item key='16'>系列产品</Menu.Item>
                <Menu.Item key='17'>省市</Menu.Item>
                <Menu.Item key='18'>交易市场</Menu.Item>
                <Menu.Item key='19'>交易方向</Menu.Item>
                <Menu.Item key='20'>系列产品+名称</Menu.Item>
                <Menu.Item key='30'>行业</Menu.Item>
                <Menu.Item key='111'>交易类型</Menu.Item>
                <Menu.Item key='112'>交易对手</Menu.Item>
                <Menu.Item key='113'>资金可用</Menu.Item>
                <Menu.Item key='114'>持仓可用</Menu.Item>
                <Menu.Item key='115'>产品组列表</Menu.Item>
                <Menu.Item key='116'>win债券类型</Menu.Item>
                <Menu.Item key='120'>租户</Menu.Item>
                <Menu.Item key='121'>评级区间</Menu.Item>
                <Menu.Item key='122'>资金运用行业</Menu.Item>
                <Menu.Item key='123'>sppi目标结果</Menu.Item>
                <Menu.Item key='124'>业务目标内容</Menu.Item>
              </SubMenu>
              <SubMenu key='2' title='查询组件'>
                <Menu.Item key='21'>查询组件</Menu.Item>
              </SubMenu>
              <SubMenu key='22' title='form集合组件'>
                <Menu.Item key='211'>form集合组件</Menu.Item>
                <Menu.Item key='212'>一排一个以及一排两个自适应</Menu.Item>
              </SubMenu>
              <SubMenu key='3' title='表格组件'>
                <Menu.Item key='31'>普通表格</Menu.Item>
                <Menu.Item key='34'>嵌套表格</Menu.Item>
                <Menu.Item key='73'>表格大量数据优化加载</Menu.Item>
                <Menu.Item key='76'>嵌套表格大量数据加载</Menu.Item>
                {/* <Menu.Item key="33">表头固定</Menu.Item>
                 */}
              </SubMenu>
              <SubMenu key='4' title='其他组件'>
                <Menu.Item key='41'>模态框</Menu.Item>
                <Menu.Item key='42'>一级标题</Menu.Item>
                <Menu.Item key='43'>二、三级标题</Menu.Item>
                <Menu.Item key='44'>按钮</Menu.Item>
                <Menu.Item key='45'>快速查询按钮</Menu.Item>
                <Menu.Item key='46'>无查询</Menu.Item>
                <Menu.Item key='47'>无数据</Menu.Item>
                <Menu.Item key='48'>无数据蒙层</Menu.Item>
                <Menu.Item key='49'>日期进度条</Menu.Item>
                <Menu.Item key='410'>公共函数</Menu.Item>
                <Menu.Item key='411'>测试自定义form</Menu.Item>
                <Menu.Item key='412'>附件上传/文件导入</Menu.Item>
                <Menu.Item key='413'>图标</Menu.Item>
                <Menu.Item key='414'>卡片</Menu.Item>
                <Menu.Item key='415'>消息提示</Menu.Item>
                <Menu.Item key='416'>悬浮按钮</Menu.Item>
                <Menu.Item key='417'>文件导出</Menu.Item>
                <Menu.Item key='421'>前端自导出</Menu.Item>
                <SubMenu key='4.1' title='基于数据导出表格'>
                  <Menu.Item key='425'>基于数据导出表格</Menu.Item>
                  <Menu.Item key='426'>表格行列合并导出（基于库）</Menu.Item>
                  <Menu.Item key='427'>多sheet页（基于库）</Menu.Item>
                  <Menu.Item key='428'>设置单元格样式（基于库）</Menu.Item>
                  <Menu.Item key='429'>设置行样式（基于库）</Menu.Item>
                  <Menu.Item key='430'>设置整体样式（基于库）</Menu.Item>
                  <Menu.Item key='431'>表格行列合并（基于库）</Menu.Item>
                </SubMenu>
                <Menu.Item key='418'>导出PDF</Menu.Item>
                <Menu.Item key='419'>连接两个dom</Menu.Item>
                <Menu.Item key='exportWord'>导出Word</Menu.Item>
                <Menu.Item key='domToImage'>Dom元素转图片</Menu.Item>
                <Menu.Item key='420'>连接websocket</Menu.Item>
                <Menu.Item key='422'>汇总条目</Menu.Item>
                <Menu.Item key='423'>tabs</Menu.Item>
                <Menu.Item key='424'>视频播放</Menu.Item>
                <Menu.Item key='435'>stepC步骤</Menu.Item>
              </SubMenu>
              <SubMenu key='5' title='echarts组件'>
                <Menu.Item key='51'>纵向echarts图</Menu.Item>
                <Menu.Item key='52'>横向echarts图</Menu.Item>
                <Menu.Item key='53'>大事记图</Menu.Item>
                <Menu.Item key='54'>上下联动图</Menu.Item>
                <Menu.Item key='55'>矩形树图</Menu.Item>
                <Menu.Item key='74'>我的echarts图</Menu.Item>
                <Menu.Item key='75'>地图</Menu.Item>
                <Menu.Item key='56'>树形结构图</Menu.Item>
                <Menu.Item key='57'>K线图</Menu.Item>
                <Menu.Item key='58'>饼状图</Menu.Item>
                <Menu.Item key='59'>仪表盘</Menu.Item>
              </SubMenu>
              <SubMenu key='6' title='form表单'>
                <Menu.Item key='61'>复杂时间区间</Menu.Item>
                <Menu.Item key='62'>简单时间区间</Menu.Item>
                <Menu.Item key='63'>下拉选择</Menu.Item>
                <Menu.Item key='64'>单时间</Menu.Item>
                <Menu.Item key='65'>所有form类型</Menu.Item>
                <Menu.Item key='66'>树形下拉控件</Menu.Item>
                <Menu.Item key='67'>自定义时间组件（支持季度）</Menu.Item>
              </SubMenu>
              <SubMenu key='7' title='流程图'>
                <Menu.Item key='71'>流程图展示</Menu.Item>
                <Menu.Item key='72'>流程图操作</Menu.Item>
              </SubMenu>
              <SubMenu key='8' title='测试'>
                <Menu.Item key='80'>导出PDF</Menu.Item>
                <Menu.Item key='81'>表格大量数据优化加载</Menu.Item>
              </SubMenu>
            </Menu>
          </div>

          <Content
            style={{ border: '1px solid lightgray', height: 'calc(100vh - 80px)', width: 'calc(100vw - 220px)', marginLeft: '16px', overflowY: 'scroll', overflowX: 'auto' }}
          >
            {this.menuList.find((item) => item.key === this.state.selectKey).component}
          </Content>
        </Layout>
      </div>
    );
  }
}

export default Demo;
